

<div class="col-xs-12 col-sm-9">
<div class="mainbar">
<div class="article">

<div class="tab-content">
<div id="1" role="tabpanel" class="tab-pane active">
    <h2>รายการรออนุมัติ</h2>

    <ul>
        <li>
            <a  data-toggle="modal" data-target="#myModal1">
                รายการที่ 1 9980010846
            </a>
        </li>
        <li>
            <a  data-toggle="modal" data-target="#myModal2">
                รายการที่ 2 //รหัสใบยืมครุภัณฑ์//
            </a>
        </li>
    </ul>
    <p>
        //ดึงข้อมูล borrow form ที่ยังไม่ได้อนุมัติ แล้ววนลูปแสดงใบยืมที่ละใบ
    </p>

</div>
<div id="2" role="tabpanel" class="tab-pane">
    <h2>ค้นหาข้อมูลครุภัณฑ์</h2>

    <form class="form-inline">
        <div class="form-group">
            <label class="sr-only" for="exampleInputEmail3">รหัสครุภัณฑ์</label>
            <input type="text" class="form-control" id="exampleInputEmail3" placeholder="รหัสครุภัณฑ์">
        </div> หรือ
        <div class="form-group">
            <label class="sr-only" for="exampleInputPassword3">ชื่อครุภัณฑ์</label>
            <input type="text" class="form-control" id="exampleInputPassword3" placeholder="ชื่อครุภัณฑ์">
        </div>

        <button type="submit" class="btn btn-default">ค้นหา</button>
    </form>

    <p>ผลการค้นหา</p>
    <table class="table table-striped">
        <tr>
            <td>#</td>
            <td>รหัสครุภัณฑ์ </td>
            <td>ชื่อครุภัณฑ์</td>
            <td>สถานะ</td>

        </tr>
        <tr>
            <td>

            </td>
            <td><a data-toggle="modal" data-target="#myModal3">
                    0000000001
                </a>
            </td>
            <td><a data-toggle="modal" data-target="#myModal3">
                    A
                </a>
            </td>
            <td><a data-toggle="modal" data-target="#myModal3">
                    พร้อมใช้งาน
                </a>
            </td>
        </tr>
        <tr>
            <td>

            </td>
            <td><a  data-toggle="modal" data-target="#myModal4">
                    0000000002
                </a>
            </td>
            <td><a  data-toggle="modal" data-target="#myModal4">
                    B
                </a>
            </td>
            <td><a  data-toggle="modal" data-target="#myModal4">
                    ไม่พร้อมใช้งาน
                </a>
            </td>
            </a>
        </tr>
        <tr>
            <td>

            </td>
            <td><a  data-toggle="modal" data-target="#myModal5">
                    0000000003
                </a>
            </td>
            <td><a  data-toggle="modal" data-target="#myModal5">
                    C
                </a>
            </td>
            <td><a  data-toggle="modal" data-target="#myModal5">
                    ส่งซ่อม
                </a>
            </td>
        </tr>
    </table>

</div>
<div id="3" role="tabpanel" class="tab-pane" >
    <h2>เพิ่มข้อมูลครุภัณฑ์</h2>
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
        เพิ่มข้อมูลครุภัณฑ์
    </button>

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">กรอกข้อมูลครุภัณฑ์</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" action="<?=base_url('permission/submit')?>" method="post">
                        <div class="form-group">
                            <label for="username" class="col-sm-3 control-label">รหัสครุภัณฑ์</label>
                            <div class="col-sm-9">
                                <input style="width: auto; font-size: 20px;" type="text" name="tool_id"
                                       class="form-control" placeholder="รหัสครุภัณฑ์" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputPassword3" class="col-sm-3 control-label">ชื่อครุภัณฑ์</label>
                            <div class="col-sm-9">
                                <input style="width: auto; font-size: 20px;"type="text" class="form-control" name="name" placeholder="ชื่อครุภัณฑ์" >
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputPassword3" class="col-sm-3 control-label">ยี่ห้อ</label>
                            <div class="col-sm-9">
                                <input style="width: auto; font-size: 20px;"type="text" class="form-control" name="brand" placeholder="ยี่ห้อ" >
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="firstname" class="col-sm-3 control-label">Serial No.</label>
                            <div class="col-sm-9">
                                <input style="width: auto; font-size: 20px;"type="text" class="form-control" name="serial_no" placeholder="Serial No.">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-3 control-label">คำอธิบายครุภัณฑ์</label>
                            <div class="col-sm-9">
                                <textarea style="width: 400px; font-size: 20px;"type="text" class="form-control" name="desc" placeholder="คำอธิบายครุภัณฑ์" rows="3"></textarea>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="inputPassword3" class="col-sm-3 control-label">สถานที่</label>
                            <div class="col-sm-9">
                                <input style="width: auto; font-size: 20px;"type="text" class="form-control" name="location" placeholder="สถานที่" >
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="exampleInputFile" class="col-sm-3 control-label">รูปภาพ</label>
                            <div class="col-sm-9">
                                <input type="file" name="picture">
                                <p class="help-block">Example picture.jpg</p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="exampleInputFile" class="col-sm-3 control-label">คู่มือ</label>
                            <div class="col-sm-9">
                                <input type="file" name="manual">
                                <p class="help-block">Example picture.jpg</p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputPassword3" class="col-sm-3 control-label">วันที่ได้รับ</label>
                            <div class="col-sm-9">
                                <input style="width: auto; font-size: 20px;"type="date" class="form-control" name="date_received">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputPassword3" class="col-sm-3 control-label">ปีงบประมาณ</label>
                            <div class="col-sm-9">
                                <input style="width: auto; font-size: 20px;"type="text" class="form-control" name="budget_year" placeholder="ปีงบประมาณ" >
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputPassword3" class="col-sm-3 control-label">หน่วย</label>
                            <div class="col-sm-9">
                                <input style="width: auto; font-size: 20px;"type="text" class="form-control" name="unit" placeholder="หน่วย" >
                            </div>
                        </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-default" data-dismiss="modal">ยกเลิก</button>
                    <button type="submit" class="btn btn-primary">ตกลง</button>
                </div>
                </form>
            </div>
        </div>
    </div><br>
    <div>
        <table class="table table-striped">
            <tr>
                <td>#</td>
                <td>รหัสครุภัณฑ์ </td>
                <td>Serial NO.</td>
                <td>ชื่อครุภัณฑ์</td>
                <td>ยี่ห้อ</td>
                <td>คำอธิบายครุภัณฑ์</td>
                <td>สถานที่</td>
                <td>รูปภาพ</td>
                <td>คู่มือการใช้งาน</td>
                <td>วันที่ได้รับ</td>
                <td>ปีงบประมาณ</td>
                <td>หน่วย</td>
            </tr>
            <?php
            if(!empty($records)) {
                $i = 1;
                foreach ($records as $row) {
                    ?>
                    <tr>
                        <td><?= $i++ ?></td>
                        <td><?= $row['toolID'] ?></td>
                        <td><?= $row['name'] ?></td>
                        <td><?= $row['brand'] ?></td>
                        <td><?= $row['serialNo'] ?></td>
                        <td><?= $row['description'] ?></td>
                        <td><?= $row['location'] ?></td>
                        <td>
                            <div style="background-color: red; width: 80px; height: 100px;"></div>
                        </td>
                        <td></td>
                        <td><?= $row['date_received'] ?></td>
                        <td><?= $row['budget_year'] ?></td>
                        <td><?= $row['unit'] ?></td>
                        <td>
                            <form class="form-horizontal" data-toggle="modal" data-target="#myModal_edit">
                                <button type="button" class="btn btn-default">แก้ไขข้อมูล</button>
                            </form>
                        </td>

                    </tr>

            <!-- Modal_edit -->
            <div class="modal fade" id="myModal_edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="myModalLabel">กรอกข้อมูลครุภัณฑ์</h4>
                        </div>
                        <div class="modal-body">
                            <form class="form-horizontal" action="<?=base_url('permission/update')?>" method="post">
                                <div class="form-group">
                                    <label for="username" class="col-sm-3 control-label">รหัสครุภัณฑ์</label>
                                    <div class="col-sm-9">
                                        <input style="width: auto; font-size: 20px;" type="text" name="tool_id"
                                               class="form-control" placeholder="รหัสครุภัณฑ์" required >
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="inputPassword3" class="col-sm-3 control-label">ชื่อครุภัณฑ์</label>
                                    <div class="col-sm-9">
                                        <input style="width: auto; font-size: 20px;"type="text" class="form-control" name="name" placeholder="ชื่อครุภัณฑ์" >
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="inputPassword3" class="col-sm-3 control-label">ยี่ห้อ</label>
                                    <div class="col-sm-9">
                                        <input style="width: auto; font-size: 20px;"type="text" class="form-control" name="brand" placeholder="ยี่ห้อ" >
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="firstname" class="col-sm-3 control-label">Serial No.</label>
                                    <div class="col-sm-9">
                                        <input style="width: auto; font-size: 20px;"type="text" class="form-control" name="serial_no" placeholder="Serial No.">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="inputEmail3" class="col-sm-3 control-label">คำอธิบายครุภัณฑ์</label>
                                    <div class="col-sm-9">
                                        <textarea style="width: 400px; font-size: 20px;"type="text" class="form-control" name="desc" placeholder="คำอธิบายครุภัณฑ์" rows="3"></textarea>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="inputPassword3" class="col-sm-3 control-label">สถานที่</label>
                                    <div class="col-sm-9">
                                        <input style="width: auto; font-size: 20px;"type="text" class="form-control" name="location" placeholder="สถานที่" >
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="exampleInputFile" class="col-sm-3 control-label">รูปภาพ</label>
                                    <div class="col-sm-9">
                                        <input type="file" name="picture">
                                        <p class="help-block">Example picture.jpg</p>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="exampleInputFile" class="col-sm-3 control-label">คู่มือ</label>
                                    <div class="col-sm-9">
                                        <input type="file" name="manual">
                                        <p class="help-block">Example picture.jpg</p>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="inputPassword3" class="col-sm-3 control-label">วันที่ได้รับ</label>
                                    <div class="col-sm-9">
                                        <input style="width: auto; font-size: 20px;"type="date" class="form-control" name="date_received">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="inputPassword3" class="col-sm-3 control-label">ปีงบประมาณ</label>
                                    <div class="col-sm-9">
                                        <input style="width: auto; font-size: 20px;"type="text" class="form-control" name="budget_year" placeholder="ปีงบประมาณ" >
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="inputPassword3" class="col-sm-3 control-label">หน่วย</label>
                                    <div class="col-sm-9">
                                        <input style="width: auto; font-size: 20px;"type="text" class="form-control" name="unit" placeholder="หน่วย" >
                                    </div>
                                </div>
                        </div>
                        <div class="modal-footer">
                <?php
                }
            } else {
                ?>
                <tr>
                    <td colspan="9">No data</td>
                </tr>
            <?php
            }
            ?>
        </table>
    </div>
    <form class="form-horizontal" action="<?=base_url('permission/confirm_submit')?>" method="post">
        <button type="submit" class="btn btn-primary">บันทึก</button>
    </form>
</div>
<div id="4" role="tabpanel" class="tab-pane" >
    <h2>ค้นหาครุภัณฑ์ที่ต้องการแก้ไขข้อมูล</h2>


    <form class="form-inline">
        <div class="form-group">
            <label class="sr-only" for="exampleInputEmail3">รหัสครุภัณฑ์</label>
            <input type="text" class="form-control" id="exampleInputEmail3" placeholder="รหัสครุภัณฑ์">
        </div>
        <div class="form-group">
            <label class="sr-only" for="exampleInputPassword3">ชื่อครุภัณฑ์</label>
            <input type="text" class="form-control" id="exampleInputPassword3" placeholder="ชื่อครุภัณฑ์">
        </div>

        <button type="submit" class="btn btn-default">ค้นหา</button>
    </form>
    <p>ผลการค้นหา</p>
    <table class="table table-striped">
        <tr>
            <td>#</td>
            <td>รหัสครุภัณฑ์ </td>
            <td>ชื่อครุภัณฑ์</td>
            <td>สถานะ</td>
        </tr>
        <tr>
            <td>

            </td>
            <td><a data-toggle="modal" data-target="#myModal6">
                    0000000001
                </a>
            </td>
            <td><a data-toggle="modal" data-target="#myModal6">
                    A
                </a>
            </td>
            <td><a data-toggle="modal" data-target="#myModal6">
                    พร้อมใช้งาน
                </a>
            </td>
        </tr>

    </table>
</div>
<div id="5" role="tabpanel" class="tab-pane" >
    <h2>เปลี่ยนสถานะครุภัณฑ์</h2>

    <form class="form-inline">
        <div class="form-group">
            <label class="sr-only" for="exampleInputEmail3">รหัสครุภัณฑ์</label>
            <input type="text" class="form-control" id="exampleInputEmail3" placeholder="รหัสครุภัณฑ์">
        </div>
        <div class="form-group">
            <label class="sr-only" for="exampleInputPassword3">ชื่อครุภัณฑ์</label>
            <input type="text" class="form-control" id="exampleInputPassword3" placeholder="ชื่อครุภัณฑ์">
        </div>

        <button type="submit" class="btn btn-default">ค้นหา</button>
    </form>
    <p>ผลการค้นหา</p>
    <table class="table table-striped">
        <tr>
            <td>#</td>
            <td>รหัสครุภัณฑ์ </td>
            <td>ชื่อครุภัณฑ์</td>
            <td>สถานะ</td>
        </tr>
        <tr>
            <td>

            </td>
            <td><a data-toggle="modal" data-target="#myModal3">
                    0000000001
                </a>
            </td>
            <td><a data-toggle="modal" data-target="#myModal3">
                    A
                </a>
            </td>
            <td>
                <div class="dropdown">
                    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
                        พร้อมใช้งาน
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">จำหน่าย</a></li>
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">ส่งซ่อม</a></li>
                    </ul>
                </div>
            </td>
        </tr>
        <tr>
            <td>

            </td>
            <td><a  data-toggle="modal" data-target="#myModal5">
                    0000000003
                </a>
            </td>
            <td><a  data-toggle="modal" data-target="#myModal5">
                    C
                </a>
            </td>
            <td>
                <div class="dropdown">
                    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
                        ส่งซ่อม
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">จำหน่าย</li>
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">พร้อมใช้งาน</li>
                    </ul>
                </div>
            </td>
        </tr>

    </table>
</div>
<div id="6" role="tabpanel" class="tab-pane" >
    <h2>ยืมครุภัณฑ์</h2>

    <form class="form-inline">
        <div class="form-group">
            <label class="sr-only" for="exampleInputEmail3">รหัสครุภัณฑ์</label>
            <input type="text" class="form-control" id="exampleInputEmail3" placeholder="รหัสครุภัณฑ์">
        </div>
        <div class="form-group">
            <label class="sr-only" for="exampleInputPassword3">ชื่อครุภัณฑ์</label>
            <input type="text" class="form-control" id="exampleInputPassword3" placeholder="ชื่อครุภัณฑ์">
        </div>

        <button type="submit" class="btn btn-default">ค้นหา</button>
    </form>
    <p>ผลการค้นหา</p>
    <table class="table table-striped">
        <tr>

            <td>รหัสครุภัณฑ์ </td>
            <td>ชื่อครุภัณฑ์</td>
            <td>สถานะ</td>

        </tr>
        <tr>
            <td><a data-toggle="modal" data-target="#myModal3">
                    0000000001
                </a>
            </td>
            <td><a data-toggle="modal" data-target="#myModal3">
                    A
                </a>
            </td>
            <td><a data-toggle="modal" data-target="#myModal3">
                    พร้อมใช้งาน
                </a>
            </td>
            <td>
                <button type="button" onclick="myFunction()">ยืมครุภัณฑ์</button>
            </td>
        </tr>


    </table>
    <p>รายการครุภัณฑ์ที่ยืม</p>
    <table class="table table-striped">
        <tr>

            <td>รหัสครุภัณฑ์ </td>
            <td>ชื่อครุภัณฑ์</td>
            <td>สถานะ</td>

        </tr>
        <tr>
            <form>
                <!--
                <select id="mySelect" size="5">
                    <option></option>
                </select>
                -->
            </form>
        </tr>

    </table>
    <br>

    <script>
        function myFunction() {
            var x = document.getElementById("mySelect");
            var option = document.createElement("option");
            option.text = "Hello";
            x.add(option, x[0]);
        }
    </script>
</div>
<div id="7" role="tabpanel" class="tab-pane" >
    <h2>คืนครุภัณฑ์</h2>

    <form class="form-inline">
        <div class="form-group">
            <label class="sr-only" for="exampleInputEmail3">รหัส</label>
            <input type="text" class="form-control" id="exampleInputEmail3" placeholder="รหัสนักศึกษา">
        </div>
        <div class="form-group">
            <label class="sr-only" for="exampleInputPassword3">ชื่อ</label>
            <input type="text" class="form-control" id="exampleInputPassword3" placeholder="ชื่อ">
        </div>
        <div class="form-group">
            <label class="sr-only" for="exampleInputPassword3">นามสกุล</label>
            <input type="text" class="form-control" id="exampleInputPassword3" placeholder="นามสกุล">
        </div>

        <button type="submit" class="btn btn-default">ค้นหา</button>
    </form>
    <hr/>
    <p>ผลการค้นหา</p>
    <table class="table table-hover">
        <tr>
            <td>รหัส</td>
            <td>ชื่อ </td>
            <td>นามสกุล</td>
            <td>สิทธิ์การใช้งาน</td>

        </tr>
        <tr>
            <td><a data-toggle="modal" data-target="#myModal7">5410610926</a></td>
            <td><a data-toggle="modal" data-target="#myModal7">วรากร</a></td>
            <td><a data-toggle="modal" data-target="#myModal7">ปลาสุวรรณ</a></td>
            <td><a data-toggle="modal" data-target="#myModal7">นักศึกษา</a></td>
        </tr>
        <tr>
            <td><a data-toggle="modal" data-target="#myModal8">5410610017</a></td>
            <td><a data-toggle="modal" data-target="#myModal8">วรากร</a></td>
            <td><a data-toggle="modal" data-target="#myModal8">ศิริทรัพย</a>์</td>
            <td><a data-toggle="modal" data-target="#myModal8">นักศึกษา</a></td>
        </tr>
    </table>
</div>
<div id="8" role="tabpanel" class="tab-pane" >
    <h2>ประวัติการยืมครุภัณฑ์</h2>

    <form class="form-inline">
        <div class="form-group">
            <label class="sr-only" for="exampleInputEmail3">รหัสครุภัณฑ์</label>
            <input type="text" class="form-control" id="exampleInputEmail3" placeholder="รหัสครุภัณฑ์">
        </div>
        <div class="form-group">
            <label class="sr-only" for="exampleInputPassword3">ชื่อครุภัณฑ์</label>
            <input type="text" class="form-control" id="exampleInputPassword3" placeholder="ชื่อครุภัณฑ์">
        </div>

        <button type="submit" class="btn btn-default">ค้นหา</button>
    </form>
    <p>ผลการค้นหา</p>
    <table class="table table-striped">
        <tr>
            <td>#</td>
            <td>รหัสครุภัณฑ์ </td>
            <td>ชื่อครุภัณฑ์</td>
            <td>สถานะ</td>

        </tr>
        <tr>
            <td>

            </td>
            <td><a data-toggle="modal" data-target="#myModal11">
                    0000000001
                </a>
            </td>
            <td><a data-toggle="modal" data-target="#myModal11">
                    A
                </a>
            </td>
            <td><a data-toggle="modal" data-target="#myModal11">
                    พร้อมใช้งาน
                </a>
            </td>
        </tr>

    </table>
</div>

</div>
</div>

</div>
</div>

<!-- Button trigger modal -->

<!-- Modal 1 -->
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel"> รายการที่ 1 9980010846 </h4>
            </div>
            <div class="modal-body">

                <table class="table table-striped">
                    <tr>
                        <td>#</td>
                        <td>รหัสครุภัณฑ์ </td>
                        <td>ชื่อครุภัณฑ์</td>

                        <td></td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>001010</td>
                        <td>ชื่อครุภัณฑ์</td>

                        <td></td>
                    </tr>
                </table>//วนลูปรายการในใบยืมที่ 1
                ข้อมูลครุภัณฑ์
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">ไม่อนุมัติ</button>
                <button type="button" class="btn btn-primary">อนุมัติ</button>
            </div>
        </div>
    </div>
</div>
<!-- Modal 1-->
<!-- Modal 2-->
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">รายการที่ 2 9980010858</h4>
            </div>
            <div class="modal-body">

                <table class="table table-striped">
                    <tr>
                        <td>#</td>
                        <td>รหัสครุภัณฑ์ </td>
                        <td>ชื่อครุภัณฑ์</td>
                        <td></td>
                        <td></td>
                    </tr>
                </table> //วนลูปรายการในใบยืมที่ 2
                ข้อมูลครุภัณฑ์
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">ไม่อนุมัติ</button>
                <button type="button" class="btn btn-primary">อนุมัติ</button>
            </div>
        </div>
    </div>
</div>
<!-- Modal 2-->
<!-- Modal 3 -->
<div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel"> ข้อมูลครุภัณฑ์ </h4>
            </div>
            <div class="modal-body">

                <table class="table table-striped">
                    <tr>
                        <td>รหัสครุภัณฑ์ </td>
                        <td>0000000001</td>
                    </tr>
                    <tr>
                        <td>ชื่อครุภัณฑ์</td>
                        <td>A</td>
                    </tr>
                    <tr>
                        <td>ยี่ห้อ</td>
                        <td>....</td>
                    </tr>
                    <tr>
                        <td>Serial Number</td>
                        <td>....</td>
                    </tr>
                    <tr>
                        <td>คำอธิบาย</td>
                        <td>....</td>
                    </tr>
                    <tr>
                        <td>สถานะ</td>
                        <td>พร้อมใช้งาน</td>
                    </tr>
                    <tr>
                        <td>สถานที่</td>
                        <td>คลัง</td>
                    </tr>
                    <tr>
                        <td>วันที่รับครุภัณฑ์</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>รูปภาพ</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>คู่มือการใช้งาน</td>
                        <td></td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>
<!-- Modal 3-->
<!-- Modal 4 -->
<div class="modal fade" id="myModal4" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel"> ข้อมูลครุภัณฑ์ </h4>
            </div>
            <div class="modal-body">

                <table class="table table-striped">
                    <tr>
                        <td>รหัสครุภัณฑ์ </td>
                        <td>0000000002</td>
                    </tr>
                    <tr>
                        <td>ชื่อครุภัณฑ์</td>
                        <td>B</td>
                    </tr>
                    <tr>
                        <td>ยี่ห้อ</td>
                        <td>....</td>
                    </tr>
                    <tr>
                        <td>Serial Number</td>
                        <td>....</td>
                    </tr>
                    <tr>
                        <td>คำอธิบาย</td>
                        <td>....</td>
                    </tr>
                    <tr>
                        <td>สถานะ</td>
                        <td>ไม่พร้อมใช้งาน</td>
                    </tr>
                    <tr>
                        <td>สถานที่</td>
                        <td>Lab ห้อง 517</td>
                    </tr>
                    <tr>
                        <td>วันที่รับครุภัณฑ์</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>รูปภาพ</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>คู่มือการใช้งาน</td>
                        <td></td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>
<!-- Modal 4-->
<!-- Modal 5 -->
<div class="modal fade" id="myModal5" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel"> ข้อมูลครุภัณฑ์ </h4>
            </div>
            <div class="modal-body">

                <table class="table table-striped">
                    <tr>
                        <td>รหัสครุภัณฑ์ </td>
                        <td>0000000003</td>
                    </tr>
                    <tr>
                        <td>ชื่อครุภัณฑ์</td>
                        <td>C</td>
                    </tr>
                    <tr>
                        <td>ยี่ห้อ</td>
                        <td>....</td>
                    </tr>
                    <tr>
                        <td>Serial Number</td>
                        <td>....</td>
                    </tr>
                    <tr>
                        <td>คำอธิบาย</td>
                        <td>....</td>
                    </tr>
                    <tr>
                        <td>สถานะ</td>
                        <td>ส่งซ่อม</td>
                    </tr>
                    <tr>
                        <td>สถานที่</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>วันที่รับครุภัณฑ์</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>รูปภาพ</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>คู่มือการใช้งาน</td>
                        <td></td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>
<!-- Modal 5-->
<!-- Modal 6-->
<!-- Modal -->
<div class="modal fade" id="myModal6" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">กรอกข้อมูลครุภัณฑ์</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label for="username" class="col-sm-3 control-label">รหัสครุภัณฑ์</label>
                        <div class="col-sm-9">
                            <input style="width: auto; font-size: 20px;" type="text"  id="username" name="username"
                                   class="form-control" placeholder="รหัสครุภัณฑ์" required>
                        </div>

                    </div>
                    <div class="form-group">
                        <label for="inputPassword3" class="col-sm-3 control-label">ชื่อครุภัณฑ์</label>
                        <div class="col-sm-9">
                            <input style="width: auto; font-size: 20px;"type="text" class="form-control" id="inputPassword3" placeholder="ชื่อครุภัณฑ์" >
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputPassword3" class="col-sm-3 control-label">ยี่ห้อ</label>
                        <div class="col-sm-9">
                            <input style="width: auto; font-size: 20px;"type="text" class="form-control" id="inputPassword3" placeholder="ยี่ห้อ" >
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="firstname" class="col-sm-3 control-label">Serial No.</label>
                        <div class="col-sm-9">
                            <input style="width: auto; font-size: 20px;"type="text" class="form-control" id="inputPassword3" placeholder="Serial No.">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputEmail3" class="col-sm-3 control-label">คำอธิบายครุภัณฑ์</label>
                        <div class="col-sm-9">
                            <textarea style="width: 400px; font-size: 20px;"type="text" class="form-control" id="inputEmail3" placeholder="คำอธิบายครุภัณฑ์" rows="3"></textarea>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="inputPassword3" class="col-sm-3 control-label">สถานที่</label>
                        <div class="col-sm-9">
                            <input style="width: auto; font-size: 20px;"type="text" class="form-control" id="inputPassword3" placeholder="สถานที่" >
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="exampleInputFile" class="col-sm-3 control-label">รูปภาพ</label>
                        <div class="col-sm-9">
                            <input type="file" id="exampleInputFile" >
                            <p class="help-block">Example picture.jpg</p>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputPassword3" class="col-sm-3 control-label">วันที่ได้รับ</label>
                        <div class="col-sm-9">
                            <input style="width: auto; font-size: 20px;"type="text" class="form-control" id="inputPassword3" placeholder="วันที่ได้รับ" >
                        </div>
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">ยกเลิก</button>
                <button type="button" class="btn btn-primary">ตกลง</button>
            </div>
        </div>
    </div>
</div>
<!-- modal6 -->
<!-- Modal7-->
<div class="modal fade" id="myModal7" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">รายการที่ยังไม่นำมาคืน</h4>
            </div>
            <div class="modal-body">

                <table class="table table-striped">
                    <tr></tr>
                    <tr>
                        <td><a data-toggle="modal" data-target="#myModal9">ใบยืมที่4</a></td>
                    </tr>
                    <tr>
                        <td><a data-toggle="modal" data-target="#myModal10">ใบยืมที่3</a></td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>
<!-- Modal7-->
<!-- Modal8-->
<div class="modal fade" id="myModal8" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">รายการที่ยังไม่นำมาคืน</h4>
            </div>
            <div class="modal-body">

                <table class="table table-striped">
                    <tr></tr>
                    <tr>
                        <td>ใบยืมที่8</td>
                    </tr>
                    <tr>
                        <td>ใบยืมที่6</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>
<!-- Modal8-->
<!-- Modal9-->
<div class="modal fade" id="myModal9" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">รายการที่ยังไม่นำมาคืน</h4>
            </div>
            <div class="modal-body">

                <table class="table table-striped">
                    <tr>
                        <td>#</td>
                        <td>รหัสครุภัณฑ์ </td>
                        <td>ชื่อครุภัณฑ์</td>

                        <td></td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>001010</td>
                        <td>ชื่อครุภัณฑ์</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>001011</td>
                        <td>ชื่อครุภัณฑ์</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>001012</td>
                        <td>ชื่อครุภัณฑ์</td>
                    </tr>
                </table>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary">คืน</button>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Modal9-->
<!-- Modal10-->
<div class="modal fade" id="myModal10" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">รายการที่ยังไม่นำมาคืน</h4>
            </div>
            <div class="modal-body">

                <table class="table table-striped">
                    <tr>
                        <td>#</td>
                        <td>รหัสครุภัณฑ์ </td>
                        <td>ชื่อครุภัณฑ์</td>

                        <td></td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>001032</td>
                        <td>ชื่อครุภัณฑ์</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>001019</td>
                        <td>ชื่อครุภัณฑ์</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>001016</td>
                        <td>ชื่อครุภัณฑ์</td>
                    </tr>
                </table>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary">คืน</button>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Modal10-->
<!-- Modal11-->
<div class="modal fade" id="myModal11" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">ประวัติการยืม ครุภัณฑ์ A</h4>
            </div>
            <div class="modal-body">

                <table class="table table-striped">
                    <tr>
                        <td>#</td>
                        <td colspan="2">ผู้ยืม</td>
                        <td>วันที่ยืม</td>
                        <td>วันที่ส่งคืน</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>วรากร</td>
                        <td>ปลาสุวรรณ</td>
                        <td>xx-xx-xxxx</td>
                        <td>aa-aa-aaaa</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>bbb</td>
                        <td>vvvvv</td>
                        <td>xx-xx-xxxx</td>
                        <td>aa-aa-aaaa</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>
<!-- Modal11-->
<div class="clr"></div>
</div>
</div>